<template>
  <!--朋友列表 -->
  <div>
    <!-- 第二部分 搜索框和一个加号 -->
    <div class="two-class">
      <spane class="spane-class">好友列表</spane>
      <div class="haoyou-el-calss">
        <el-badge is-dot class="item">
          <el-button size="small" @click="openList">好友申请</el-button>
        </el-badge>
      </div>
      <div class="list-class">
        <ul>
          <li v-for="user in data" v-bind:key="user.urId">
            <div class="list-div-calss" @click="ClickToChat(user.urId)">
              <img class="list-img-calss" :src="user.urAvatar" />
              <p class="list-p-class">{{ user.urName }}</p>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import user from "@/api/admin";
import { getUserId } from "@/utils/auth";
export default {
  data() {
    return {
      count: 0,
      data: [],
    };
  },
  created() {
    /* var snd = new Audio("http://other.web.nf03.sycdn.kuwo.cn/5e7449f01a9eb42919a942393e4fa84d/613ad706/resource/m2/24/10/2899838339.mp4"); // buffers automatically when created
  snd.play(); */
    this.getuserList();
  },
  mounted() {},
  methods: {
    /* 点击跟好友进行聊天 */
    ClickToChat(ChatuserId, socket) {
      this.$emit("chatUser", ChatuserId, socket);
    },

    /* 获取好友列表的数据 */
    getuserList() {
      user.getFriends(getUserId()).then((res) => {
        this.data = res.data.data;
      });
    },

    /* 打开好友申请 */
    openList() {
      this.$emit("openAddUser");
    },
  },
};
</script>

<style>
.spane-class {
  font-size: 15px;
  position: relative;
  margin-left: 20%;
  top: 4%;
}

.user-avatar-calss {
  width: 20%;
  border-radius: 50%;
}
.haoyou-el-calss {
  position: relative;
  left: 67%;
}
.list-class {
  overflow-y: auto;
  height: 90%;
}

.list-div-calss {
  width: 100%;
  height: 45px;
  background-color: #d4d4d4;
  /*     border: 1px solid black; */
}
.list-class ul {
  display: inline;
}

.list-img-calss {
  position: relative;
  float: left;
  width: 18%;
  border-radius: 50%;
}
.list-p-class {
  margin-left: 1%;
  top: 20%;
  position: relative;
}
</style>